<template>
  <view class="floating-ball"
        :style="{ bottom: ballBottom + 'px', right: ballRight + 'px' }"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
        @click.stop="handleClick">
    <image class="ball-icon" :src="iconUrl"></image>
  </view>
</template>

<script>
import { useAiChatStore } from '../../store/aiChatStore'

export default {
  name: 'FloatingBall',
  props: {
    iconUrl: {
      type: String,
      default: '/static/icon/AI/zhushou.png'
    },
    initBottom: {
      type: Number,
      default: 100
    },
    initRight: {
      type: Number,
      default: 20
    },
    Margin: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
      ballBottom: this.initBottom,
      ballRight: this.initRight,
      startX: 0,
      startY: 0,
      moveX: 0,
      moveY: 0,
      offsetX: 0,
      offsetY: 0,
      isMoving: false,
      windowWidth: 0,
      windowHeight: 0
    }
  },
  mounted() {
    const res = uni.getSystemInfoSync()
    this.windowWidth = res.windowWidth
    this.windowHeight = res.windowHeight
    console.log('悬浮球组件挂载成功，窗口尺寸:', this.windowWidth, this.windowHeight)
  },
  methods: {
    handleTouchStart(e) {
      this.isMoving = false
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
      this.offsetX = this.startX - this.ballRight
      this.offsetY = this.startY - (this.windowHeight - this.ballBottom)
    },

    handleTouchMove(e) {
      this.isMoving = true
      this.moveX = e.touches[0].clientX
      this.moveY = e.touches[0].clientY

      let newRight = this.startX - this.offsetX + (this.moveX - this.startX)
      let newBottom = this.windowHeight - (this.startY - this.offsetY) - (this.startY - this.moveY)

      newRight = Math.max(0, Math.min(this.windowWidth - 50, newRight))
      newBottom = Math.max(0, Math.min(this.windowHeight - 50, newBottom))

      this.ballRight = newRight
      this.ballBottom = newBottom
    },

    handleTouchEnd() {
      if (!this.isMoving || (Math.abs(this.moveX - this.startX) < 5 && Math.abs(this.moveY - this.startY) < 5)) {
        this.isMoving = false
        return
      }

      const centerX = this.windowWidth / 2
      if (this.ballRight < centerX) {
        this.ballRight = this.Margin
      } else {
        this.ballRight = this.windowWidth - 50 - this.Margin
      }
    },

    handleClick() {
      if (!this.isMoving) {
        const aiStore = useAiChatStore()
        aiStore.toggleDialog(true)
        console.log('悬浮球点击，触发显示AI对话框')
      }
    }
  }
}
</script>

<style scoped>
.floating-ball {
  position: fixed;
  z-index: 9997;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.ball-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
</style>